<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"
        contentType="text/html"
        renderKitId="PRIMEFACES_MOBILE">

    <pm:page title="EducaTransitoMob">  

        <!-- Main View -->
        <pm:view id="main">            

            <pm:header title="EducaTransitoMob" swatch="b">
            </pm:header>

            <div align="center">
                <p:graphicImage url="./../resources/imagens/EducaTransito.png" width="50%" alt="educacao_no_transito"/>
            </div>

            <h:form>
                <h:outputText value="#{loginManagedBean.cabecalho}"/>
                <h:commandLink action="#{loginManagedBean.efetuarLogoutMobile()}" rendered="#{loginManagedBean.usuarioLogado == true}" value="Logout" />
            </h:form>
            <pm:content>
                <p:dataList type="inset">
                    <f:facet name="header">EducaTransito - Mobile</f:facet>
                    <h:outputLink value="#sobre?transition=slide">Sobre EducaTransito</h:outputLink>
                    <h:outputLink value="#login?transition=slide" rendered="#{loginManagedBean.usuarioLogado == false}" >Login</h:outputLink>
                    <h:outputLink value="#placas?transition=slide">Placas</h:outputLink>
                    <h:outputLink value="#estudos?transition=slide">Estudos</h:outputLink>
                    <h:outputLink value="#dicas?transition=slide">Dicas</h:outputLink>
                    <h:outputLink value="#curiosidades?transition=slide">Curiosidades</h:outputLink>
                    <h:outputLink value="#forum?transition=slide" rendered="#{loginManagedBean.usuarioLogado == true}">Fórum</h:outputLink>
                </p:dataList>

            </pm:content>

        </pm:view>

        <!-- Sobre -->
        <pm:view id="sobre">
            <pm:header title="Sobre" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#main?transition=slide"/></f:facet>
            </pm:header>

            <div align="center">
                <p:graphicImage url="./../resources/imagens/EducaTransito.png" width="30%" alt="educacao_no_transito"/>
            </div>

            <h:outputText value="#{loginManagedBean.cabecalho}"/>
            <h:commandLink action="#{loginManagedBean.efetuarLogoutMobile()}" rendered="#{loginManagedBean.usuarioLogado == true}" value="Logout" />


            <f:facet name="header">Sobre EducaTransito</f:facet>
            <pm:content>
                <p:panel header="Sobre EducaTransito">
                    <div align="justify">
                        Bem Vindos!!!
                        <br/>
                        <br/>
                        O novo Código de Trânsito Brasileiro entrou em vigor em 22 de janeiro de 1998, com 341 artigos que regem e normatizam pontos importantes como sinalização, conduta e circulação, direção defensiva, infrações e penalidades aplicáveis.
                        <br/>
                        <br/>
                        O Dicionário Aurélio define TRÂNSITO como: “Ato ou efeito de caminhar; marcha, movimento, circulação, afluência de pessoas ou de veículos.” e TRÁFEGO como o “fluxo das mercadorias transportadas, por aerovia, ferrovia, hidrovia ou rodovia”.
                        <br/>
                        <br/>
                        O trânsito, em condições seguras, é um direito de todos e dever dos órgãos e entidades componentes do Sistema Nacional de Trânsito, a estes cabendo, no âmbito das respectivas competências, adotar as medidas destinadas a assegurar esse direito. Saiba mais sobre o sistema nacional do trânsito, nas normas gerais de circulação e conduta, dos pedestres e condutores de veículos não motorizados e muito mais.
                    </div>
                </p:panel>
            </pm:content>


        </pm:view>


        <!-- Login -->
        <pm:view id="login">
            <pm:header title="Login" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#main?transition=slide"/></f:facet>
            </pm:header>

            <pm:content>

                <div align="center">            
                    <h:form id="formLogin" >
                        <p:growl autoUpdate="formLogin" />
                        <p:panel header="Login" closable="true">
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Usuário:" for="usr" />
                                <p:inputText  value="#{loginManagedBean.login}" id="usr" style="width: 80%;"
                                              required="true" requiredMessage="Necessário digitar um nome de usuário"/>
                                <h:outputLabel value="Senha:" for="pwd" />
                                <p:password value="#{loginManagedBean.senha}" feedback="false" maxlength="8" id="pwd" style="width: 80%;" 
                                            required="true" requiredMessage="Necessário digitar uma senha"/>
                            </h:panelGrid>
                            <div align="center">
                                <h:commandButton id="OK" action="#{loginManagedBean.efetuarLogin}" value="OK" />
                            </div>
                        </p:panel>
                    </h:form>
                </div>

            </pm:content>

        </pm:view>

        <!-- Placas -->
        <pm:view id="placas">
            <pm:header title="Placas" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#main?transition=slide"/></f:facet>
            </pm:header>
            <pm:content>
                <p:dataList type="inset">
                    <f:facet name="header">Placas de Trânsito</f:facet>
                    <h:outputLink value="#plSinal?transition=slide">Placas de Sinalização</h:outputLink>
                    <h:outputLink value="#plAdvert?transition=slide">Placas de Advertência</h:outputLink>
                </p:dataList>
            </pm:content>

        </pm:view>

        <!-- Placas Sinalização -->
        <pm:view id="plSinal">
            <pm:header title="Placas" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#placas?transition=slide"/></f:facet>
            </pm:header>
            <pm:content>
                <div align="center">
                    SINALIZAÇÃO DE SINALIZAÇÃO
                    <br/>
                    <br/>
                </div>
                <div align="justify">
                    Tem por finalidade informar aos usuários das condições, proibições, obrigações ou restrições no uso das vias. 
                    Suas mensagens são imperativas e seu desrespeito constitui infração.

                </div>
            </pm:content>

            <br/>
            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/plt_001.gif" width="89" height="127"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_002.gif" width="93" height="119"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_003.gif" width="91" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_004.gif" width="91" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_005.gif" width="91" height="127"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_006.gif" width="91" height="127"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/plt_007.gif" width="91" height="127"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_008.gif" width="91" height="127"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_009.gif" width="91" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_010.gif" width="91" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_011.gif" width="91" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_012.gif" width="91" height="130"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/plt_013.gif" width="111" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_014.gif" width="116" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_015.gif" width="91" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_016.gif" width="91" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_017.gif" width="91" height="129"/><h:outputText value="    "/> 
                <p:graphicImage url="imagens/plt_018.gif" width="91" height="129"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px"> 
                <p:graphicImage url="imagens/plt_019.gif" width="91" height="129"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_020.gif" width="91" height="129"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_021.gif" width="103" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_022.gif" width="91" height="129"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_023.gif" width="105" height="134"/> <h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_024.gif" width="91" height="118"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/plt_025.gif" width="91" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_026.gif" width="91" height="127"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_027.gif" width="91" height="127"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_028.gif" width="91" height="127"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_029.gif" width="95" height="119"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_030.gif" width="91" height="119"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px"> 
                <p:graphicImage url="imagens/plt_031.gif" width="91" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_032.gif" width="91" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_033.gif" width="91" height="117"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_034.gif" width="149" height="129"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_035.gif" width="91" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_036.gif" width="91" height="129"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px"> 
                <p:graphicImage url="imagens/plt_037.gif" width="91" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_038.gif" width="91" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_039.gif" width="93" height="130"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_040.gif" width="91" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_041.gif" width="93" height="133"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/plt_042.gif" width="121" height="155"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_043.gif" width="119" height="155"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_044.gif" width="135" height="207"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/plt_045.gif" width="143" height="275"/>
            </p>

        </pm:view>

        <!-- Placas Advetência -->
        <pm:view id="plAdvert">
            <pm:header title="Placas" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#placas?transition=slide"/></f:facet>
            </pm:header>
            <pm:content>
                <div align="center">
                    PLACAS DE ADVERTÊCIA
                    <br/>
                    <br/>
                </div>
                <div align="justify">
                    Tem por finalidade alertar aos usuários da via para condições potencialmente perigosas, indicando sua natureza.
                    Suas mensagens possuem caráter de recomendação.
                </div>
            </pm:content>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/adv_001.gif" width="102" height="142"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_002.gif" width="102" height="142"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_003.gif" width="102" height="133"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_004.gif" width="102" height="133"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_005.gif" width="112" height="139"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_006.gif" width="102" height="139"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/adv_007.gif" width="102" height="139"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_008.gif" width="102" height="139"/> <h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_009.gif" width="102" height="130"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_010.gif" width="103" height="130"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_011.gif" width="102" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_012.gif" width="102" height="130"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/adv_013.gif" width="102" height="141"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_014.gif" width="107" height="137"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_015.gif" width="107" height="137"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_016.gif" width="102" height="139"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_017.gif" width="102" height="139"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_018.gif" width="102" height="151"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/adv_019.gif" width="102" height="148"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_020.gif" width="102" height="141"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_021.gif" width="102" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_022.gif" width="106" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_023.gif" width="102" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_024.gif" width="102" height="138"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/adv_025.gif" width="102" height="130"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_026.gif" width="102" height="130"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_027.gif" width="102" height="132"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_028.gif" width="102" height="132"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_029.gif" width="102" height="131"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_030.gif" width="102" height="131"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/adv_031.gif" width="102" height="141"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_032.gif" width="102" height="141"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_033.gif" width="102" height="139"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_034.gif" width="102" height="129"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_035.gif" width="102" height="131"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_036.gif" width="102" height="126"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/adv_037.gif" width="103" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_038.gif" width="108" height="80"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_039.gif" width="108" height="79"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_040.gif" width="119" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_041.gif" width="102" height="129"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_042.gif" width="102" height="130"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/adv_043.gif" width="102" height="129"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_044.gif" width="102" height="131"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_045.gif" width="102" height="130"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_046.gif" width="102" height="141"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_047.gif" width="102" height="132"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_048.gif" width="102" height="141"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/adv_049.gif" width="102" height="131"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_050.gif" width="102" height="131"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_051.gif" width="102" height="131"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_052.gif" width="102" height="131"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_053.gif" width="103" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_054.gif" width="102" height="140"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/adv_055.gif" width="102" height="140"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_056.gif" width="116" height="93"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_057.gif" width="102" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_058.gif" width="102" height="127"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_059.gif" width="102" height="127"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_060.gif" width="102" height="127"/>
            </p>

            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/adv_061.gif" width="102" height="128"/><h:outputText value="    "/>
                <p:graphicImage url="imagens/adv_062.gif" width="102" height="129"/>
            </p>

        </pm:view>

        <!-- Estudos -->
        <pm:view id="estudos">
            <pm:header title="Estudos" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#main?transition=slide"/></f:facet>
            </pm:header>
            <pm:content>
                <p:dataList type="inset">
                    <f:facet name="header">Estudos sobre Trânsito</f:facet>
                    <h:outputLink value="#legislacao?transition=slide">Legislação de Trânsito</h:outputLink>
                    <h:outputLink value="#seguranca?transition=slide">Segurança</h:outputLink>
                </p:dataList>
            </pm:content>

        </pm:view>

        <!-- Legislação de Trânsito -->
        <pm:view id="legislacao">

            <pm:header title="Legislação de Trânsito" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#estudos?transition=slide"/></f:facet>
            </pm:header>

            <pm:content>
                <div align="center">
                    <br/>
                    <br/>
                    <h1>Legislação de Trânsito</h1>
                    <br/>
                    <br/>
                </div>
                <div align="justify">
                    O trânsito de qualquer natureza nas vias terrestres do
                    território nacional, abertas à circulação, rege-se por este Código.
                    Considera-se trânsito a utilização das vias por pessoas,
                    veículos e animais, isolados ou em grupos, conduzidos ou não,
                    para fins de circulação, parada, estacionamento e operação de
                    carga ou descarga.
                    <br/>
                    <br/>
                    Comentário: Além desta definição, o C.T.B., em seu Anexo
                    I, define trânsito como a “movimentação e imobilização de
                    veículos, pessoas e animais nas vias terrestres.”
                    É comum ouvirmos falar que o “trânsito estava intenso” ou
                    “o tráfego estava intenso”. Existe uma diferença entre trânsito e
                    tráfego.
                    O Dicionário Aurélio define TRÂNSITO como: “Ato ou
                    efeito de caminhar; marcha, movimento, circulação, afluência
                    de pessoas ou de veículos.” e TRÁFEGO como o “fluxo das
                    mercadorias transportadas, por aerovia, ferrovia, hidrovia ou
                    rodovia”
                </div>
            </pm:content>
        </pm:view>        

        <!-- Trânsito Seguro -->
        <pm:view id="seguranca">

            <pm:header title="Trânsito Seguro" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#estudos?transition=slide"/></f:facet>
            </pm:header>

            <pm:content>
                <div align="center">
                    <br/>
                    <br/>
                    <h1>Trânsito Seguro</h1>
                    <br/>
                    <br/>
                </div>
                <div align="justify">
                    O principal modo de transporte no Brasil é o rodoviário, respondendo por mais de 58% do volume de movimentação nacional de cargas, e 48% do transporte interestadual de passageiros. Sendo, portanto, um país rodoviarista, é desnecessário dizer que é muito importante para a sociedade que os governos invistam nas suas polícias rodoviárias. Não é preciso destacar o papel decisivo que estas polícias desenvolvem no combate ao roubo de cargas, tráfico de drogas e, em especial, na prevenção dos acidentes de trânsito.
                    <br/>
                    <br/>
                    Todos os dias, morrem cerca de cem brasileiros no trânsito! A cada ano, temos, aproximadamente, 40 mil mortes. Uma tragédia sem comparações, maior do que as piores guerras. Claro, metade das vítimas morre nas ruas e avenidas das cidades, onde atropelamentos, acidentes com motociclistas e bebedeira no volante se destacam como patrocinadores das tragédias. Por isso, as operações de fiscalização, como a Balada Segura, são fundamentais.
                    Mas, nas nossas rodovias, a imprudência e o crime campeiam! Alta velocidade, ultrapassagens em locais proibidos e uso de bebidas alcoólicas, entre outras drogas, formam um tripé decisivo para a perda de tantas vidas. O Brasil paga muito caro por tudo isso!
                    As perdas econômicas e as vidas ceifadas precocemente, que não têm preço, se multiplicam, sem falar das aposentadorias por invalidez que inflam o déficit previdenciário no país, e gastos bilionários em internações hospitalares. A estimativa é de R$ 25 bilhões/ano, os gastos no Brasil com a carnificina no trânsito. Se somarmos a isto os prejuízos do roubo de carros e cargas, vamos a números estratosféricos.
                    Por tudo isso, fica muito difícil entender o descaso dos governos com as polícias rodoviárias, tanto no baixo efetivo policial quanto na falta de estrutura, investimento em qualificação e nos baixos salários. O efetivo da Polícia Rodoviária Federal (PRF) no país é composto por menos de 9 mil agentes. No nosso Estado, ele é constituído por somente 685, sendo que o ideal seriam 1.576 policiais rodoviários em atuação. Segundo o Sindicato da Polícia Rodoviária Federal do RS, é o menor efetivo dos últimos 16 anos.
                    O número insuficiente de policiais nas estradas e a pouca valorização destes profissionais são uma injeção na veia do crime e da imprudência. No momento em que se discute no Congresso Nacional a fixação de metas anuais visando à redução de mortes no trânsito, além do aumento das penas dos crimes de trânsito, cresce em importância a atuação e qualificação das polícias rodoviárias. A impunidade no trânsito e os crimes nas nossas estradas só serão combatidos com fiscalização permanente e abordagem presencial dos policiais.

                </div>
            </pm:content>
        </pm:view>

        <!-- Dicas -->
        <pm:view id="dicas">
            <pm:header title="Dicas" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#main?transition=slide"/></f:facet>
            </pm:header>
            <pm:content>
                <p:dataList type="inset">
                    <f:facet name="header">Dicas sobre Trânsito</f:facet>
                    <h:outputLink value="#prsocorro?transition=slide">Primeiros Socorros</h:outputLink>
                    <h:outputLink value="#motociclistas?transition=slide">Motociclistas</h:outputLink>
                    <h:outputLink value="#promecanico?transition=slide">Problemas Mecânicos</h:outputLink>
                    <h:outputLink value="#viajar?transition=slide">Antes de viajar</h:outputLink>
                </p:dataList>
            </pm:content>

        </pm:view>

        <!-- Primeiros socorros -->
        <pm:view id="prsocorro">
            <pm:header title="Primeiros socorros" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#dicas?transition=slide"/></f:facet>
            </pm:header>
            <pm:content>
                <div align="center">
                    <br/>
                    <br/>
                    <h1>Primeiros socorros</h1>
                    <br/>
                    <br/>
                </div>
                <div align="justify">
                    Fernando Bueno Leitão é médico, professor de Anestesiologia no Hospital das Clínicas de São Paulo e coordenador do curso de primeiros socorros para profissionais da saúde do HC.                               
                    <br/>
                    As medidas que se tomam no momento de um acidente podem ser fundamentais para a saúde e a vida das pessoas que se machucaram. No entanto, em grande parte dos casos, acidentes que ocorrem no dia a dia, muitas vezes dentro de casa, recebem tratamento inadequado.
                    Quando uma criança rala o joelho, quantas mães não correm solícitas até a farmacinha doméstica, pegam merthiolate, mercurocromo, iodo, pomadas, substâncias que em geral causam ardor, espalham sobre o ferimento e sopram para aliviar o sofrimento do filho sem dar-se conta de que estão jogando os germes de sua garganta sobre uma ferida aberta.
                    Em relação às queimaduras, o panorama não é diferente. Coloca-se de tudo sobre a região afetada. Uns passam manteiga; outros, pó de café ou uma infinidade de pomadas que se encontram à disposição no mercado, e há os que esfregam a pele danificada pelo calor nos cabelos agredindo-a mais ainda.
                    E o que fazer quando uma pessoa cai da escada, quebra uma perna ou um braço ou sofre um acidente na rua? O primeiro atendimento que recebe pode salvá-la da invalidez. O caso do ator Christopher Reeves, o Super-Homem do cinema, que ficou tetraplégico depois de ter caído do cavalo, ilustra bem essa situação.

                    <br/>
                </div>                         
            </pm:content>
        </pm:view>

        <!-- Motociclistas -->
        <pm:view id="motociclistas">
            <pm:header title="Motociclistas" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#dicas?transition=slide"/></f:facet>
            </pm:header>
            <pm:content>
                <div align="center">
                    <br/>
                    <br/>
                    <h1>Motociclistas</h1>
                    <br/>
                    <br/>
                </div>
                <div align="justify">
                    Motociclistas - 20 TRUQUES E DICAS PARA INICIANTES
                    <br/>
                    Com o trânsito intenso e o preço dos combustíveis nas alturas, a procura pela primeira motocicleta está se tornando inevitável. Confira dicas importantes para andar com mais segurança no trânsito.
                    <br/>
                    1. Reconheça os seus próprios limites. Se não está à vontade para encarar o trânsito com uma moto, espere um pouco. Procure a ajuda de motociclistas mais experientes para receber dicas e instruções.
                    <br/>
                    2. Se tem pouca prática, ande alguns quilômetros no fim de semana, quando o tráfego é mais leve.
                    <br/>
                    3. Equipe-se. O capacete é obrigatório, mas não dispense nunca as luvas e uma jaqueta com proteções rígidas nos cotovelos e ombros.
                    <br/>
                    4. Prefira um capacete integral, ou modular. Não use nunca o capacete do tipo “coquinho”.
                    <br/>
                    5. Se usar um capacete do tipo aberto, proteja os olhos com óculos especiais, ou escolha um com viseira.
                    <br/>
                    6. Utulize botas ao invés de tênis. Os outros veículos podem passar por cima de seu pé quando menos esperar e quanto mais proteção, melhor.
                    <br/>
                    7. A condução deve ser sempre suave. Pode ser de modo rápido ou lento, mas sempre suavemente. Evite manobras bruscas, acelerações despropositadas e travar as rodas em frenagens.
                    <br/>
                    8. Mostre-se. Vista cores chamativas com refletivos e mantenha sempre o conjunto óptico em dia.
                    <br/>
                    9. Mantenha sempre as luzes da moto acesas de noite e de dia.
                    <br/>
                    10. Não retire os piscas nem os retrovisores da sua moto para ficar com aspecto mais “racing”. Além de ser proibido, é muito imprudente.
                    <br/>
                    11. Utilize os piscas para mudar de direção e quando mudar de faixa.
                    <br/>
                    12. Se tem dúvidas se os outros estão vendo você, não hesite em sinalizar com gestos a sua manobra.
                    <br/>
                    13. Fique sempre em estado de alerta, mesmo no ambiente mais pacífico. As armadilhas estão lá, evite-as.
                    <br/>
                    14. Espere sempre o pior de cada situação. Dessa forma, estará menos sujeito a surpresas.
                    <br/>
                    15. Circule sempre a uma distância de segurança do veículo da frente. Procure não ser seguido de perto por outro veículo. Se necessário, acione o freio rapidamente para “assustar” o outro motorista, afastando-o assim.
                    <br/>
                    16. Conduza com os “olhos”. O local que olhar será onde as rodas passarão. Não fixe o olhar nos obstáculos e, sim, no espaço livre. Olhe para o espaço ao lado do buraco na estrada, não para o próprio buraco.
                    <br/>
                    17. Não se fixe só no carro que vai à frente. Tente antecipar o que todos os carros ao seu redor planejam fazer. Se um veículo mais distante travar as rodas você estará preparado.
                    <br/>
                    18. Conduza em função do que vê. Não entre em velocidade exagerada em uma curva sem visibilidade suficiente, ou ao virar uma esquina. Pode haver algo inesperado.
                    <br/>
                    19. Do mesmo modo, não fique parado logo após uma curva ou esquina de pouca visibilidade.
                    <br/>
                    20. Tente antecipar a ação dos outros motoristas. A movimentação corporal pode indicar as ações futuras.
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                </div>
            </pm:content>
        </pm:view>

        <!-- Problemas Mecânicos -->
        <pm:view id="promecanico">
            <pm:header title="Problemas Mecânicos" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#dicas?transition=slide"/></f:facet>
            </pm:header>
            <pm:content>
                <div align="center">
                    <br/>
                    <br/>
                    <h1>Problemas Mecânicos</h1>
                    <br/>
                    <br/>
                </div>
                <div align="justify" >
                    Você sabia que mais de trinta porcento da frota circulante apresenta algum problema mecânico? 
                    Esse funcionamento anormal compromete a segurança do veículo e como conseqüência, prejuízos e problemas no trânsito, 
                    recorrência comum nos últimos tempos. A recomendação de especialistas é que você determine se possível um príodo de 
                    tempo para que seu mecânico de confiança faça uma inspeção de rotina, para verificar o que estiver em mau funcionamento, 
                    além de sempre que for viajar, repetir o check list.

                    <br/>

                </div>
            </pm:content>
            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/trabalho.gif" width="300" height="229"/>                         
                <h:outputText value="Trabalho"/>                                                        
            </p>
            <pm:content>
                <div align="justify">
                    <br/>
                    Raio X
                    <br/>
                    O problema é que muitas pessoas não sabem detectar quando algum componente do veículo está pedindo socorro. 
                    Cerca de 35% da frota apresentam problemas graves que podem comprometer o funcionamento de toda a mecânica, 
                    como vazamentos, peças desgastadas, correias ressecadas são ocorrências comuns num território perigoso, que é o 
                    das nossas estradas. Além disso, não há uma consciência de que a falta de manutenção do veículo acarreta não só 
                    problemas para ele, mas para quem ele pode colidir ou mesmo ao Governo, que gasta cerca de 22 bilhões de dólares 
                    com o cuidado dos acidentados nas estradas, em números são mais de 65 mil feridos e 7 mil mortos, em média nestes anos.
                    <br/>
                    <br/>
                </div>
            </pm:content>
            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/tecnico.gif" width="300" height="229"/>
                <h:outputText value="Técnico"/>                                                        
            </p>
        </pm:view>

        <!-- Antes de Viajar -->
        <pm:view id="viajar">
            <pm:header title="Antes de Viajar" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#dicas?transition=slide"/></f:facet>
            </pm:header>
            <pm:content>
                <div align="center">
                    <br/>
                    <br/>
                    <h1>Antes de viajar</h1>
                    <br/>
                    <br/>
                </div>
                <div align="justify">
                    O capixaba se prepara para mais um feriado prolongado e muitos aproveitarão a folga para viajar e pegar a estrada. Mas é preciso ficar atento a algumas dicas importantes para evitar transtornos e garantir uma viagem segura.  Pensando nisso, especialistas do Departamento Estadual de Trânsito (Detran|ES) orientam sobre os cuidados que se deve ter antes de fazer as malas e assumir a direção do veículo.
                    O estado de conservação do carro ou motocicleta é o primeiro item a ser observado. Por isso é aconselhável fazer uma revisão no veículo para ter certeza de que pneus, freios, equipamentos de sinalização, limpador de para-brisa e o óleo do motor estão em dia.
                    Também é importante não sobrecarregar o veículo com excesso de peso, para não comprometer a dirigibilidade do mesmo.  A atenção deve ser redobrada nas rodovias, sobretudo naquelas onde há somente uma faixa de circulação em cada sentido. Ultrapassagens indevidas causam boa parte dos acidentes nas estradas.
                    Segundo estatísticas recentes, 95% dos acidentes ocorrem por falha humana. Por isso, muito cuidado ao fazer ultrapassagens: verifique se há visibilidade e se a sinalização permite a manobra. Essas dicas são sempre importantes e ajudam a diminuir os riscos de acidentes.
                    <br/>
                    <br/>
                    Cuidados com o carro:
                    <br/>
                    Pneus
                    <br/>
                    Devem sempre estar em boas condições, com a calibragem correta, o que assegura a durabilidade e economiza combustível.  Devem estar com os sulcos não inferiores a 1,6 milímetros, pois com menos do que isto eles não garantem a aderência ao asfalto. Se a pista estiver molhada, o pneu careca aumenta os riscos de aquaplanagem (deslizamento do veículo sob uma lâmina de água). A multa por conta de pneus carecas é de R$ 127,69, além de menos cinco pontos na CNH.
                    <br/>
                    Alinhamento 
                    <br/>
                    O serviço de alinhamento deve ser feito a cada 10 mil quilômetros. Entretanto, condições adversas como buracos ou pequenas colisões podem alterar o alinhamento do veículo, gerando falta de estabilidade, volante descentralizado, direção para algum lado e desgaste irregular de pneus.
                    <br/>
                    Freios 
                    <br/>
                    Pastilhas, discos e tambor devem ser inspecionados e substituídos, se for o caso. É essencial verificar o nível do fluido de freio, que tem durabilidade de cerca de dois anos. Se o fluido não estiver dentro da validade, a frenagem fica comprometida.

                </div>
            </pm:content>
        </pm:view>

        <!-- Curiosidades -->
        <pm:view id="curiosidades">
            <pm:header title="Curiosidades" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#main?transition=slide"/></f:facet>
            </pm:header>
            <pm:content>
                <p:dataList type="inset">
                    <f:facet name="header">Curiosidades</f:facet>
                    <h:outputLink value="#caminhoneiros?transition=slide">Caminhoneiros</h:outputLink>
                    <h:outputLink value="#onibus?transition=slide">Motoristas de Ônibus</h:outputLink>
                    <h:outputLink value="#licenciamento?transition=slide">Tabela de Licenciamento</h:outputLink>
                </p:dataList>
            </pm:content>
        </pm:view>

        <!-- Caminhoneiros -->
        <pm:view id="caminhoneiros">
            <pm:header title="Caminhoneiros" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#curiosidades?transition=slide"/></f:facet>
            </pm:header>
            <pm:content>
                <div align="center">
                    <br/>
                    <br/>
                    <h1>Caminhoneiros</h1>
                    <br/>
                    <br/>
                </div>
                <div align="justify">
                    Recomendações da Polícia Rodoviária Federal
                    <br/>
                    <br/>
                    - Verifique se os documentos do veículo e do motorista estão em ordem; 
                    <br/>
                    - Faça uma inspeção preventiva no veículo, antes de iniciar a viagem; 
                    <br/>
                    - Não ingerir bebidas alcoólicas; 
                    <br/>
                    - Se a jornada é longa, não coma alimentos de difícil digestão, a fim de evitar sono. 
                    <br/>
                    - Use sempre o cinto de segurança; 
                    <br/>
                    - Não carregue excesso de peso de carga; 
                    <br/>
                    - Não trafegue pelo acostamento que é reservado para emergências; 
                    <br/>
                    - Sob chuva e nevoeiro mantenha acesas as luzes externas do veículo; 
                    <br/>
                    - Observe a distância de segurança em relação aos demais veículos. 
                    <br/>
                    <br/>
                    Viagem
                    <br/>
                    - Procurar saber qual é o melhor caminho para chegar ao seu destino e que cuidados tomar dependendo do tipo de carga que está transportando. 
                    <br/>
                    - Planejar paradas para abastecer, comer e dormir também ajudam a tranqüilizar a viagem; 
                    <br/>
                    - Saber se a cidade para onde vai acontecem muitos roubos de caminhões e cargas; 
                    <br/>
                    - Quando chegar à cidade, procurar saber qual o melhor caminho para se chegar ao local da descarga. 
                    <br/>
                    - É importante ter em mãos telefones do embarcador e do destinatário da carga e da família. 
                    <br/>
                    Checagem do Caminhão e Carga
                    <br/>
                    - Verificar sistemas de freio, elétrico, de ar, pressão do óleo, dos pneus e abastecer. 
                    <br/>
                    - Verificar se os documentos pessoais do caminhão e da carga estão em ordem, para evitar problemas com a polícia rodoviária e a fiscalização das rodovias. 
                    <br/>
                    - Verificar arrumação da carga, altura, cordas, lona, lacre etc. 
                    <br/>
                    <br/>
                    Seu Caminhão
                    <br/>
                    - Evite deixar o veículo aberto ou a chave no contato; 
                    <br/>
                    - Nunca deixe os documentos ou objeto de valor expostos dentro do veículo; 
                    <br/>
                    - Quando estacionar o seu caminhão, evite os acostamentos, salvo em emergências; 
                    <br/>
                    - Procure estacionar seu caminhão em locais apropriado e bem iluminados;
                    <br/>
                    - Ao receber sinal de estranhos, não pare e nem dê carona; 
                    <br/>
                    - Instale sistema de alarme e segurança. Faça seguro total (roubo, incêndio); 
                    <br/>
                    - Seja discreto evite comentários sobre sua carga e itinerário. 
                    <br/>
                    - Se possível, instale sistema de alarme e segurança; 
                    <br/>
                    - Faça seguro total (roubo, incêndio); 
                    <br/>
                    - Caso seja abordado por assaltantes armados, não reaja. 

                </div>
            </pm:content>
        </pm:view>

        <!-- Motoristas de Ônibus -->
        <pm:view id="onibus">
            <pm:header title="Motoristas de Ônibus" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#curiosidades?transition=slide"/></f:facet>
            </pm:header>
            <pm:content>
                <div align="center">
                    <br/>
                    <br/>
                    <h1>Motoristas de Ônibus</h1>
                    <br/>
                    <br/>
                </div>
                <div align="justify">
                    Acidente com caminhão, carreta e ônibus. Porque acontecem e quais as consequências? - Dirceu Rodrigues Alves Júnior INSTITUTO TRÂNSITO BRASIL – ITB www.transitobrasil.org
                    <br/>
                    Um país com uma vasta rede fluvial, uma orla marítima
                    favorável ao transporte, desprovido de rede ferroviária
                    para escoar matéria prima e toda sua produção
                    envereda para um “sistema rodoviarista” que gera alto
                    custo, propicia o acidente e a criminalidade através de
                    roubos, assaltos, sequestros e mortes.
                    <br/>
                    A frota brasileira de caminhões e carretas deve estar em torno de três
                    milhões. Dos motoristas, 83% são autônomos, 16% tem vínculo empregatício e
                    1% são cooperativados. Entendemos que os autônomos vivem no desamparo,
                    desassistidos para o lado da saúde, da qualidade de vida e de todo o suporte
                    para o real desempenho da função. Os caminhões e carretas têm em média
                    21,5 anos de fabricação, estão bastante rodados e a manutenção é precária.
                    Em 2008, 60.558 caminhões envolveram-se em acidentes nas rodovias
                    federais. Já em 2009 tais acidentes correspondem a 25% dos acidentes em
                    rodovias federais. Agigantam-se os prejuízos material e humano. Perdas de
                    vidas, sequelados, incapacitados, crescem os problemas sociais e não se
                    encontra por parte das autoridades solução para tão grave problema.
                    Por incrível que possa parecer 93% desses acidentes ocorrem por
                    falha humana. Os principais fatores que conduzem a falha são:
                    <br/>
                    - Jornadas longas
                    <br/>
                    - Lapsos de atenção
                    <br/>
                    - Déficit de atenção
                    <br/>
                    - Falta de concentração
                    <br/>
                    - Fadiga
                    <br/>
                    - Sono
                    <br/>
                    - Desobediência à sinalização
                    <br/>
                    - Velocidade acima do permitido
                    <br/>
                    - Álcool/Drogas

                </div>
            </pm:content>
        </pm:view>

        <!-- Tabela de Licenciamento -->
        <pm:view id="licenciamento">
            <pm:header title="Tabela de Licenciamento" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#curiosidades?transition=slide"/></f:facet>
            </pm:header>
            <pm:content>
                <div align="center">
                    <br/>
                    <br/>
                    <h1>Tabela de Licenciamento</h1>
                    <br/>
                    <br/>
                </div>
                <div align="justify" style="font-size:16px">
                    I – veículo automotor, reboque e semi-reboque, exceto o definido no item II:
                    <br/>
                    Final da placa	Prazo final para Renovação
                    <br/>
                </div>
            </pm:content>
            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/tab1_licenciameno.gif" width="294" height="230"/><h:outputText value="Tabela 1"/>                                                        
            </p>
            <pm:content>
                <div align="justify" style="font-size:16px">
                    II – veículo registrado como 'caminhão' (carga):
                    <br/>
                    Final da placa	Prazo final para Renovação

                    <br/>
                </div>

            </pm:content>
            <p align="center" style="margin-top: auto; padding-top: 0px">
                <p:graphicImage url="imagens/tab2_licenciameno.gif" width="294" height="130"/><h:outputText value="Tabela 2"/>                                                        
            </p>
        </pm:view>

        <!-- Teste -->
        <pm:view id="teste">
            <pm:header title="Teste" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#main?transition=slide"/></f:facet>
            </pm:header>

            <pm:content>

                <h:outputText value="Desculpe, esta funcionalidade estará disponível apenas na versão final."/>

            </pm:content>

        </pm:view>

        <!-- Fórum -->
        <pm:view id="forum">
            <pm:header title="Fórum" swatch="b">
                <f:facet name="left"><p:button value="Voltar" icon="back" href="#main?transition=slide"/></f:facet>
            </pm:header>

            <pm:content>

                <h:outputText value="Desculpe, esta funcionalidade estará disponível apenas na versão final."/>

            </pm:content>

        </pm:view>

    </pm:page>

</f:view>